<template>
  <view>
    <m-top
      :autoBack="true"
      :bgChangeByScroll="true"
      bgColor="#8C82FF"
      @getHeight="getGlHeight"
    >
      在线报名
    </m-top>

    <m-container :top="glTop">
      <view class="pdv40">
        <view class="post-box">
          <view class="c333 font24"
            >感谢您对C3安全大会的关注，请您留下您的资料，以便我们为您提供更好的服务</view
          >
          <view class="post-box">
            <m-card>
              <view class="post-form">
                <view class="form-item">
                  <view class="label font28 c333">姓名</view>
                  <view class="mgt20">
                    <u-input
                      color="#333333"
                      fontSize="28rpx"
                      border="none"
                      v-model="state.name"
                      placeholder="请输入您的姓名"
                      :customStyle="{
                        'background-color': '#F6F5FA',
                        height: '76rpx',
                        'border-radius': '12rpx',
                        padding: '0 20rpx',
                      }"
                      placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                    ></u-input>
                  </view>
                </view>

                <!-- <view class="form-item">
                  <view class="label font28 c333">手机号</view>
                  <view class="mgt20">
                    <u-input
                      color="#333333"
                      fontSize="28rpx"
                      border="none"
                      type="number"
                      v-model="state.phone"
                      placeholder="请输入您的手机号"
                      :customStyle="{
                        'background-color': '#F6F5FA',
                        height: '76rpx',
                        'border-radius': '12rpx',
                        padding: '0 20rpx',
                      }"
                      placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                    ></u-input>
                  </view>
                </view> -->

                <view class="form-item">
                  <view class="label font28 c333">单位名称</view>
                  <view class="mgt20">
                    <u-input
                      color="#333333"
                      fontSize="28rpx"
                      border="none"
                      placeholder="请输入您的单位名称"
                      v-model="state.company_name"
                      :customStyle="{
                        'background-color': '#F6F5FA',
                        height: '76rpx',
                        'border-radius': '12rpx',
                        padding: '0 20rpx',
                      }"
                      placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                    ></u-input>
                  </view>
                </view>

                <view class="form-item">
                  <view class="label font28 c333">职位名称</view>
                  <view class="mgt20">
                    <u-input
                      color="#333333"
                      fontSize="28rpx"
                      border="none"
                      v-model="state.position"
                      placeholder="请输入职位名称"
                      :customStyle="{
                        'background-color': '#F6F5FA',
                        height: '76rpx',
                        'border-radius': '12rpx',
                        padding: '0 20rpx',
                      }"
                      placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                    ></u-input>
                  </view>
                </view>
              </view>
            </m-card>
          </view>

          <view class="post-submit">
            <u-button
              type="primary"
              color="#481EC1"
              text="提交"
              @click="submit"
              :customStyle="{
                height: '84rpx',
                'border-radius': '20rpx',
                'box-shadow': ' 0rpx 2rpx 12rpx 0rpx rgba(27,166,131,0.0988)',
                'font-size': '32rpx',
              }"
            ></u-button>
          </view>
        </view>
      </view>
    </m-container>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import { signUpMettingApi } from "@/api/modules/base.js";
import Schema from "async-validator";
import UserInfoMixin from "@/mixins/modules/user.js";

export default {
  mixins: [GlTopMixin, UserInfoMixin],
  components: {},
  data() {
    return {
      state: {
        name: "",
        phone: "",
        company_name: "",
        position: "",
      },

      descriptor: {
        name: {
          type: "string",
          required: true,
          message: "姓名必填",
        },
        // phone: [
        //   {
        //     type: "string",
        //     required: true,
        //   },
        //   {
        //     validator: (rule, value, callback) => {
        //       console.log(value);
        //       return this.$u.test.mobile(value);
        //     },
        //     message: "手机号不正确",
        //   },
        // ]
      },  
    };
  },
  watch: {
    "userInfo.tmb_id": {
      immediate: true,
      handler(value) {
        if (!value) return;
        Object.assign(this.state, {
          name: this.userInfo.tmb_name || '',
          company_name: this.userInfo.tmb_company_name || '',
          position: this.userInfo.tmb_position || '',
        });
      },
    },
  },
  async onLoad(options) {
    this.mId = options.mId;
    if (!this.mId) {
      this.$u.toast("没发现会议id，即将退出");
      await this.$u.sleep(2000);
      uni.navigateBack();
      return;
    }
  },

  methods: {
    submit() {
      const validator = new Schema(this.descriptor);
      validator.validate(this.state, async (errors, fields) => {
        if (errors) {
          const { message } = errors[0];
          return uni.$u.toast(message);
        }
        uni.showLoading({
          title: '加载中'
        });
        await signUpMettingApi({
          meeting_id: this.mId,
          ...this.state
        }).finally(uni.hideLoading)
        uni.$u.toast('报名成功')
        await this.$u.sleep(3000)
        uni.navigateBack(); // 返回上页并
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.post-box {
  margin-top: 80rpx;
}

.post-form {
  padding: 20rpx;

  .form-item {
    &:not(:first-child) {
      margin-top: 40rpx;
    }
  }
}

.post-submit {
  margin-top: 120rpx;
}
</style>